<!--
  * 自定义TabBar组件
  * 替代原生TabBar，提供更灵活的导航体验
  * 包含首页、法规中心、我的三个主要导航项
-->
<template>
  <!-- TabBar容器 -->
  <view class="custom-tabbar">
    <view class="tabbar-container">
      <!-- 首页Tab -->
      <view class="tabbar-item" @click="switchTab(0, '/pages/index')">
        <image class="tabbar-icon" :src="currentIndex === 0 ? '/static/images/tabbar/home_.png' : '/static/images/tabbar/home.png'" />
        <text class="tabbar-text" :class="{ active: currentIndex === 0 }"> 首页 </text>
      </view>

      <!-- 法规中心Tab -->
      <view class="tabbar-item" @click="switchTab(1, '/pages/work/index')">
        <image class="tabbar-icon" :src="currentIndex === 1 ? '/static/images/tabbar/regulation_.png' : '/static/images/tabbar/regulation.png'" />
        <text class="tabbar-text" :class="{ active: currentIndex === 1 }"> 法规中心 </text>
      </view>

      <!-- 我的Tab -->
      <view class="tabbar-item" @click="switchTab(2, '/pages/mine/index')">
        <image class="tabbar-icon" :src="currentIndex === 2 ? '/static/images/tabbar/mine_.png' : '/static/images/tabbar/mine.png'" />
        <text class="tabbar-text" :class="{ active: currentIndex === 2 }"> 我的 </text>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * 自定义TabBar组件
 * 提供底部导航栏功能，支持页面切换
 */
export default {
  name: 'CustomTabbar',
  props: {
    // 当前选中的Tab索引
    current: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      // 内部维护的当前Tab索引
      currentIndex: 0
    };
  },
  watch: {
    // 监听外部传入的current属性变化
    current: {
      handler(val) {
        this.currentIndex = val;
      },
      immediate: true, // 立即执行监听处理
    },
  },
  created() {
    // 组件创建时的生命周期钩子（当前为空实现）
  },
  mounted() {
    // 组件挂载后确保正确设置当前索引
    this.currentIndex = this.current;
  },
  methods: {
    /**
     * 切换Tab页面
     * @param {number} index - Tab索引
     * @param {string} path - 页面路径
     */
    switchTab(index, path) {
      // 如果点击当前已选中的Tab，则不进行操作
      if (this.currentIndex === index) {
        return;
      }

      // 使用uni-app的switchTab方法进行Tab切换
      uni.switchTab({
        url: path,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/* 自定义TabBar样式 */
.custom-tabbar {
  position: fixed; // 固定在底部
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #ffffff;
  border-top: 1rpx solid #e5e5e5;
  z-index: 9999; // 确保在最顶层
  /* 适配iOS底部安全区域 */
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* TabBar容器 */
.tabbar-container {
  display: flex;
  align-items: center;
  height: 100rpx;
  width: 100%;
}

/* Tab项样式 */
.tabbar-item {
  flex: 1; // 均分空间
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}

/* Tab图标样式 */
.tabbar-icon {
  width: 44rpx;
  height: 44rpx;
  margin-bottom: 4rpx;
}

/* Tab文字样式 */
.tabbar-text {
  font-size: 22rpx;
  color: #999999;
  line-height: 1;
  margin-top: 4rpx;

  /* 激活状态文字样式 */
  &.active {
    color: #1890ff;
  }
}
</style>
